<template>
  <page-header-wrapper :title="false">
    <a-row :gutter="10">
      <a-col :span="4">
        <a-card hoverable>
          <template slot="actions">
            <div :style="{ backgroundColor: '#fff' }">
              <div>5</div>
              <div>今日领新</div>
            </div>
            <div>
              <div>3/5</div>
              <div>完成工作</div>
            </div>
            <div>
              <div>30</div>
              <div>通话数量</div>
            </div>
            <div>
              <div>2</div>
              <div>合同</div>
            </div>
          </template>
          <a-card-meta>
            <div slot="title" :style="{ textAlign: 'center' }">
              <h2>小李</h2>
              <h5>今日业绩 / 本月总业绩 / 上月同期</h5>
              <h4>5000 / 18000 / 20000</h4>
              <a-button type="primary" size="small" shape="round" class="time">24个月</a-button>
            </div>
          </a-card-meta>
          <a-button type="danger" size="small" class="operate" ghost @click="handleQuestion">处理呼叫</a-button>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card hoverable>
          <template slot="actions" class="ant-card-actions">
            <div>
              <div>5</div>
              <div>今日领新</div>
            </div>
            <div>
              <div>3/5</div>
              <div>完成工作</div>
            </div>
            <div>
              <div>30</div>
              <div>通话数量</div>
            </div>
            <div>
              <div>2</div>
              <div>合同</div>
            </div>
          </template>
          <a-card-meta>
            <div slot="title" :style="{ textAlign: 'center' }">
              <h2>小李</h2>
              <h5>今日业绩 / 本月总业绩 / 上月同期</h5>
              <h4>5000 / 18000 / 20000</h4>
              <a-button type="primary" size="small" shape="round" class="time">24个月</a-button>
            </div>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </page-header-wrapper>
</template>

<script>
  export default {
    name: 'Console',
    data () {
      return {
      }
    },
    mounted () {

    },
    created () {
      setTimeout(() => {
        this.$notification.open({
          message: '通知',
          description: '通知',
          placement: 'bottomRight',
          onClick: () => {}
        })
      }, 3000)
    },
    methods: {
      handleQuestion () {
        this.$confirm({
          title: '处理问题'
        })
      }
    }
  }
</script>

<style scoped>
  .operate{
    position: absolute;
    left: 10px;
    top: 10px;
  }
</style>
